import React, { memo, useState, useEffect } from 'react';
import { Table, Modal, message, Button, Alert, Typography } from 'antd';
import { queryFeedbackList, onSolveFeedback } from '@/services/salaryManage/salaryConfirm';
import { feedbackHandleStatus } from '@/pages/SalaryManage/enum';
import styles from '../../index.less';

const { Text } = Typography;

const FeedBackListModal = ({ visible = false, onSetVisible = () => {}, date }) => {
    const [loading, setLoading] = useState(false);
    const [tableList, setTableList] = useState([]);
    const getTableList = async () => {
        try {
            setLoading(true);
            const { code, data = [], msg } = await queryFeedbackList({
                date
            });
            if (code === 10000) {
                setTableList(data);
            } else {
                console.log(msg);
                message.error('获取反馈记录失败，请重试！');
            }
            setLoading(false);
        } catch (e) {
            console.log(e);
            setLoading(false);
        }
    };
    const onSolve = async id => {
        try {
            setLoading(true);
            const { code, msg } = await onSolveFeedback(id);
            if (code === 10000) {
                message.success('更新成功！');
                getTableList();
            } else {
                message.error(msg);
            }
            setLoading(false);
        } catch (e) {
            console.log(e);
            setLoading(false);
        }
    };
    const columns = [
        {
            title: '反馈编号',
            dataIndex: 'feedbackNo',
            key: 'feedbackNo',
            width: 120
        },
        {
            title: '反馈时间',
            dataIndex: 'submitTime',
            key: 'submitTime',
            width: 200
        },
        {
            title: '反馈内容',
            dataIndex: 'feedback',
            key: 'feedback'
        },
        {
            title: '操作',
            key: 'action',
            width: 120,
            render: (text, record) => {
                const isDeal = record.status === feedbackHandleStatus.HANDLED;
                return (
                    <div>
                        <Button
                            type="link"
                            className={styles.tableBtn}
                            disabled={isDeal}
                            onClick={() => { onSolve(record.id) }}
                        >
                            {
                                isDeal ? '已解决' : '标为已解决'
                            }
                        </Button>
                    </div>
                )
            }
        }
    ];
    useEffect(() => {
        if (visible) {
            getTableList();
        }
    }, [visible]);
    return <Modal
        title="反馈记录"
        visible={visible}
        width={760}
        className={styles.tableFormModal}
        onCancel={() => { onSetVisible(false) }}
        destroyOnClose
        footer={null}
    >
        <Alert
            message={<Text type="warning">点击【标为已解决】表示异常反馈已解决，状态变为【已解决】不可更改</Text>}
            banner
            style={{ position: 'relative', top: '-20px', marginLeft: '-24px', marginRight: '-24px' }}
        />
        <Table
            className={styles.feedbackListTable}
            columns={columns}
            dataSource={tableList}
            loading={loading}
            pagination={false}
            scroll={{ y: 'calc(100vh - 350px)' }}
        />
    </Modal>
};
export default memo(FeedBackListModal)
